import React, { useEffect } from 'react'
import * as PIXI from 'pixi.js'

function Container5x5() {
    useEffect(() => {
        const app = new PIXI.Application({
            width: 600, height: 500, backgroundColor: 0x1099bb,
        });
        document.getElementById('app').appendChild(app.view);
        
        const container = new PIXI.Container();
        
        app.stage.addChild(container);
        
        // Create a new texture
        const texture = PIXI.Texture.from('img/ball.jpg');
        
        // Create a 5x5 grid of bunnies
        for (let i = 0; i < 25; i++) {
            const bunny = new PIXI.Sprite(texture);
            bunny.width = 30
            bunny.height = 30
            bunny.anchor.set(0.5);
            bunny.x = (i % 5) * 40;
            bunny.y = Math.floor(i / 5) * 40;
            container.addChild(bunny);
        }
        
        // Move container to the center
        container.x = app.screen.width / 2;
        container.y = app.screen.height / 2;
        
        // Center bunny sprite in local container coordinates
        container.pivot.x = container.width / 2;
        container.pivot.y = container.height / 2; // pivot类似css3 transform-origin
        
        // Listen for animate update
        app.ticker.add((delta) => {
            // rotate the container!
            // use delta to create frame-independent transform
            container.rotation -= 0.01* delta;
        });
    }, [])
    return (
        <div id="app">
            
        </div>
    )
}

export default Container5x5
